<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <script th:inline="javascript">
        $(function () {
            $("#login-submit-btn-id").click(function () {
                var flag = $("input.form-control").verification();
                if (!flag) {
                    return;
                }
                $("#login-form-id").submit();
            });
            
            $("#register-btn").click(function () {
                window.location.href="/register";
            });

            $("#change-kaptchaImage").click(function (e) {

                e.preventDefault();

                $.get("/kaptcha.jpg",function (data) {
                    $("#captcha-img").attr("src", "/kaptcha.jpg?" + new Date().getTime());
                })
            })
        });//ready


        // (function ($) {
        //     $.fn.verification1=function(p){
        //       var flag=true;
        //         // $(t).addClass("ui-state-error");
        //         // $(t).focus();
        //        // $.extend(true,{
        //        //
        //        //  },p);
        //         $(this).removeClass("ui-state-error");
        //        $(this).each(function (index,item) {
        //            // console.info(item);
        //           flag &=$.verificationItem(p,item);
        //        })
        //         return flag;
        //         }
        //         $.verificationItem=function(p,item){
        //           $.extend(true,{
        //
        //           },p);
        //           //  console.info(item);
        //             var pattern=$(item).attr("pattern");
        //             var flag=true;
        //             if(!pattern){
        //                 return flag;
        //             }
        //             // console.info("pattern:"+pattern);
        //             var reg=new RegExp(pattern);
        //             var vl=$(item).val();
        //             if(reg.test(vl)){
        //                 return  true;
        //             }else {
        //                 $(item).addClass("ui-state-error");
        //                 $(item).focus();
        //                 return false;
        //             }
        //         }
        //
        //
        // })(jQuery);
    </script>
    <style>
        /*html,*/
        /*body,*/
        /*#app{*/
        /*    height: 100%;*/
        /*}*/
        /*#app{*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    !*align-items: center;*!*/
        /*    !*justify-content: center;*!*/
        /*}*/
        .login {
            width: 300px;
            border: 1px solid #999999;
            padding: 5px;
            height: auto;
        }

        .login-head {
            flex-basis: 50px;
            display: flex;
            flex-direction: row;
        }

        .head-img {
            flex-grow: 1;
        }

        .head-lang {
            flex-basis: 200px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        #login-submit-btn-id {
            margin-top: 10px;
        }

        .login-contents {
            flex-grow: 1;
            display: flex;
            flex-direction: row;
        }

        .contents-img {
            flex-grow: 1;
        }

        .contents-form {
            flex-basis: 500px;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;
            padding-top: 55px;
        }

        .tool {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>


<div id="app">
    <div class="login-head">
        <div class="head-img">
            <img th:src="@{/assets/images/logo_zh.png}" th:if="${session.language} eq 'zh'">
            <img th:src="@{/assets/images/logo_en.png}" th:if="${session.language} eq 'en'">
        </div>
        <div class="head-lang">
            <a th:href="@{/login/login(lang=en)}" th:text="#{login.lange.english}"></a>
            <a th:href="@{/login/login(lang=zh)}" style="padding-left: 10px" th:text="#{login.lange.chinese}"></a>
        </div>

    </div>

    <div class="login-contents">
        <div class="contents-img">
            <img th:src="@{/assets/images/pic.png}">
        </div>
        <div class="contents-form">
            <form id="login-form-id" class="login" th:action="@{/login/verification}" method="post">
                <div class="form-group">
                    <span th:text="#{login.user.name}"></span>
                    <input class="form-control" type="text" name="username" pattern="^[a-z,A-Z,0-9]{1,20}$"
                           th:title="#{login.userName.tip}">
                </div>

                <div class="form-group">
                    <span th:text="#{login.user.password}"></span>
                    <input class="form-control" type="password" name="password" pattern="^[a-z,A-Z,0-9]{1,20}$"
                           th:title="#{login.password.tip}">
                </div>

<!--                &lt;!&ndash; 判断是否需要输入验证码 &ndash;&gt;-->
<!--                <div th:if="${#authentication.principal}">-->
<!--                    &lt;!&ndash; 显示验证码输入框 &ndash;&gt;-->
<!--                    <div class="form-group">-->
<!--                        <label>验证码</label>-->
<!--                        <input type="text" class="form-control" name="captcha" placeholder="请输入验证码" required="required" />-->
<!--                        <img th:src="@{/kaptcha.jpg}"  onclick="this.src='/kaptcha.jpg?' + Math.random();" width="140" height="40" id="captcha-img" title="看不清，点击换一张" /> <small id="change-kaptchaImage">看不清，点击换一张</small>-->
<!--                    </div>-->
<!--                </div>-->


                <div >
                    <!-- begin:验证码 -->
                    <input type="text" class="form-controlA" id="kaptcha" name="kaptcha"
                           placeholder="请输入验证码" style="color: #000000;"/>
                    <span class="help-block"></span>
                    <img th:src="@{/kaptcha.jpg}" width="140" height="40" id="captcha-img" title="看不清，点击换一张"/> <small id="change-kaptchaImage">看不清，点击换一张</small>
                    <!-- end:验证码 -->
                </div>

                <div class="form-group">
                    <a id="login-submit-btn-id" class="form-control btn btn-success" th:text="#{login.submit}"> </a>
                </div>
                <!--                <div class="form-group tool">-->
                <!--                    <a class="btn" th:text="#{login.forgot}"></a>-->
                <!--                    <a class="btn" th:text="#{login.register}"></a>-->
                <!--                </div>-->
                <div class="form-group tool">
                    <a class="btn" th:text="#{login.forgot}" ></a>
                    <a class="btn" id="register-btn" th:text="#{login.register}"></a>
                </div>
            </form>
        </div>
    </div>
</div>